<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box">
				<img src="../assets/logo.png" />
			</div>
			<!-- 登录表单 -->
			<el-form
				label-width="0px"
				class="login_form"
				:model="loginForm"
				:rules="loginFormRules"
				ref="loginFormRef"
			>
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input prefix-icon="el-icon-user" v-model="loginForm.username"></el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password"></el-input>
				</el-form-item>
				<!-- 按钮 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="resetLoginForm">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			loginForm: {
				username: 'admin',
				password: '123456'
			},
			// 表单验证
			loginFormRules: {
				username: [
					{
						required: true,
						message: '输入用户名',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 10,
						message: '长度在 3 到 10 个字符',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '输入密码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 15,
						message: '长度在 6 到 15 个字符',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		// 重置功能
		resetLoginForm() {
			this.$refs.loginFormRef.resetFields()
		},
		// 登录验证,valid是表单输入框内数据长度的判断，true/false
		login() {
			this.$refs.loginFormRef.validate(async valid => {
				// 登录验证
				if (!valid) return
				const { data: res } = await this.$http.post(
					'login',
					this.loginForm
				)
				if (res.meta.status !== 200)
					return this.$message.error({
						message: '登录失败,账号或密码错误',
						duration: 1000,
						offset: 100
					})
				this.$message({
					message: '恭喜你，登录成功',
					type: 'success',
					duration: 1000,
					offset: 100
				})
				// 保存token到sessionStorage
				window.sessionStorage.setItem('token', res.data.token)
				// 跳转到/home路径
				this.$router.push('/home')
			})
		}
	}
}
</script>

<style lang="less" scoped>
.login_container {
	background-color: #2d4d6b;
	height: 100%;
}
.login_box {
	width: 452px;
	height: 300px;
	background-color: #fff;
	border-radius: 5px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	.avatar_box {
		height: 130px;
		width: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 10px;
		background-color: #fff;
		box-shadow: 0 0 10px #ddd;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eee;
		}
	}
}
.btns {
	display: flex;
	justify-content: flex-end;
}
.login_form {
	width: 100%;
	position: absolute;
	bottom: 0;
	padding: 0 20px;
	box-sizing: border-box;
}
</style>
